<style>
  .detailHide {
    border: none;
  }

  .deviceForm label {
    width: 120px;
  }

  .companyFormPhotos {
    /* margin-left:140px; */
    line-height: 38px;
    float: left;
    margin-right: 30px;
  }

  .companyFormPhotos img {
    cursor: pointer;
    height: 38px;
    width: auto;
    max-width: 200px;
  }
  .layui-form-label {
    width: 130px;
  }
  .layui-input-block {
    margin-left: 140px;
  }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">
              <div class="query-lt">
                <!--         <div class="layui-inline">
                                    <label class="layui-form-label w-auto">按分类：</label>
                                    <div class="layui-input-inline mr0">
                                        <select name="qualificationTypeId">
                                            <option value="">按分类</option>
                                            <option value="1">高新技术企业</option>
                                            <option value="2">ISO9001</option>
                                        </select>
                                    </div>
                                </div>-->
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">案例名称：</label>
                  <div class="layui-input-inline mr0">
                    <input name="name" class="layui-input" type="text" placeholder="请输入案例名称" />
                  </div>
                </div>
                <div class="layui-inline">
                  <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog" lay-submit layui-form-keyDownSearch="true">查询</button>
                  <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                </div>
              </div>
              <div class="query-rt"></div>
            </div>
          </div>
        </div>
        <div class="lay-btn-rows">
          <div class="lay-btn-box">
            <div class="lay-btn-lt">
              <button lay-event="batchDel" type="button" id="batchDel" class="layui-btn icon-btn layui-btn-danger">批量删除</button>
              <button id="qualificationBtnAdd" class="layui-btn icon-btn color-reseda">添加</button>
            </div>
            <div class="lay-btn-rt"></div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <table class="layui-table" id="qualificationTable" lay-filter="qualificationTable"></table>
    </div>
  </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="qualificationTableBar">
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="detail">详情</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="qualificationForm">
  <form lay-filter="qualificationForm" class="layui-form model-form">
    <input name="id" type="hidden" />
    <div class="layui-form-item">
      <label class="layui-form-label">企业案例名称</label>
      <div class="layui-input-block">
        <input name="name" placeholder="" type="text" class="layui-input" lay-verify="required" required />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">客户企业名称</label>
      <div class="layui-input-block">
        <input name="companyName" id="companyName" type="text" class="layui-input" lay-verify="required" required />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">标题图片</label>
      <div class="layui-input-block">
        <div id="getTitleUrl" class="companyFormPhotos"></div>
        <input name="titleUrl" type="hidden" class="layui-input" lay-verify="" id="enclosureUrl" />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">关键词</label>
      <div class="layui-input-block">
        <input name="keyWords" type="text" class="layui-input" lay-verify="required" required />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">一句话简介</label>
      <div class="layui-input-block">
        <input name="remark" placeholder="" type="text" class="layui-input" lay-verify="required" required />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">发布时间</label>
      <div class="layui-input-block">
        <input name="createTime" placeholder="" type="text" class="layui-input" lay-verify="required" required />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">案例描述</label>
      <div class="layui-input-block">
        <input name="describes" placeholder="" type="text" class="layui-input" lay-verify="required" required />
      </div>
    </div>
    <div class="layui-form-item text-right">
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
    </div>
  </form>
</script>

<!-- 添加表单弹窗 -->
<script type="text/html" id="addQualificationForm">
  <form lay-filter="addQualificationForm" class="layui-form model-form">
    <input name="id" type="hidden" />
    <div class="layui-form-item">
      <label class="layui-form-label">企业案例名称</label>
      <div class="layui-input-block">
        <input name="name" placeholder="请输入企业案例名称" type="text" class="layui-input" lay-verify="required" required />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">客户企业名称</label>
      <div class="layui-input-block">
        <input name="companyName" placeholder="请输入客户企业名称" type="text" class="layui-input" lay-verify="required" required />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label ">统一信用编码</label>
      <div class="layui-input-block">
        <input name="creditCode" id="creditCode" placeholder="请输入统一信用编码" type="text" class="layui-input" lay-verify="required|creditCode" required />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">标题图片</label>
      <div class="layui-input-block">
        <div id="devicePic_path" class="companyFormPhotos"></div>
        <div id="devicePicBtn" class="layui-btn" style="float: left;"><i class="layui-icon">&#xe681;</i>上传图片</div>
        <input name="titleUrl" type="hidden" class="layui-input" lay-verify="" id="titleUrl" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">关键词</label>
      <div class="layui-input-block">
        <input name="keyWords" placeholder="请输入关键词" type="text" class="layui-input" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">一句话简介</label>
      <div class="layui-input-block">
        <input name="remark" placeholder="请输入简介" type="text" class="layui-input" />
      </div>
    </div>
    <!--
                <div class="layui-form-item">
                    <label class="layui-form-label">发布时间</label>
                    <div class="layui-input-inline">
                        <input name="createTime" placeholder="" type="text" class="layui-input" lay-verify="required" required/>
                    </div>
                </div>
        -->

    <div class="layui-form-item">
      <label class="layui-form-label">发布时间</label>
      <div class="layui-input-block">
        <!--                <input name="startTime" placeholder="" type="text" class="layui-input date-icon" lay-verify="required" required id="startTime"/>-->
        <input name="createTime" class="layui-input date-icon" type="text" placeholder="请选择时间" autocomplete="off" />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">案例描述</label>
      <div class="layui-input-block">
        <textarea id="describes" name="describes" placeholder="请输入" class="layui-textarea"></textarea>
      </div>
    </div>

    <div class="layui-form-item text-right">
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
      <button class="layui-btn" lay-filter="qualificationFormSubmit" lay-submit>保存</button>
    </div>
  </form>
</script>
<style>
  .layui-form-label {
    width: 100px;
  }
</style>
<!-- js部分 -->
<script>
  layui.use(["layer", "form", "table", "admin", "laydate", "layedit", "upload"], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var config = layui.config;
    var admin = layui.admin;
    var upload = layui.upload;
    var laydate = layui.laydate;
    var layedit = layui.layedit;

    // 渲染表格
    var insTb = table.render({
      elem: "#qualificationTable",
      url: config.base + "enterprise/customerCase/admin/customerCase/list",
      toolbar: true,
      defaultToolbar: ["filter"],
      page: true,
      cellMinWidth: 100,
      cols: [
        [
          { type: "checkbox" },
          { type: "numbers", title: "序号" },
          // , {field: 'id', sort: true, title: 'ID'}
          { field: "name", sort: true, title: "案例名称" },
          {
            field: "companyName",
            title: "客户企业" /*templet: function (d) {
                    return d.enterprise.name
                    }*/
          },
          {
            field: "creditCode",
            title: "客户统一社会信用代码" /*,templet: function (d) {
                    return d.enterprise.creditCode
                    }*/
          },
          { field: "remark", title: "描述" },
          { field: "statusDesc", title: "状态" },
          { field: "createTime", sort: true, title: "添加时间" },
          { align: "center", toolbar: "#qualificationTableBar", title: "操作", width: 200 }
        ]
      ],
      done: function (res, curr, count) {
        //移除按钮
      }
    });

    // 工具条点击事件
    table.on("tool(qualificationTable)", function (obj) {
      var data = obj.data;
      if (obj.event === "detail") {
        //修改
        showDetailModel(data);
      } else if (obj.event === "del") {
        // 删除
        doDelete(obj);
      }
    });

    //监听排序
    table.on("sort(qualificationTable)", function (obj) {
      table.reload("qualificationTable", {
        initSort: obj,
        where: {
          sort: obj.field,
          order: obj.type
        }
      });
    });

    // 搜索
    form.on("submit(formSubSearchLog)", function (data) {
      insTb.reload({ where: data.field, page: { curr: 1 } }, "data");
    });

    // 重置搜索
    form.on("submit(resets)", function (data) {
      insTb.reload({ where: admin.resetSearch(data.field), page: { curr: 1 } }, "data");
    });

    form.render("select");
    // 验证统一信用编码 规则18位数字或者大写字母
    form.verify({
      creditCode: function () {
        var creditCode = $("#creditCode").val();
        if (!creditCode) {
          return "请输入统一信用编码";
        }
        // ^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{9}[0-9A-Z]$
        if (!/^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{9}[0-9A-Z]$/.test(creditCode)) {
          return "请输入正确的统一信用编码";
        }
      }
    });
    // 显示编辑弹窗
    function showDetailModel(data) {
      admin.open({
        type: 1,
        area: "700px",
        offset: "65px",
        title: "资质详情",
        content: $("#qualificationForm").html(),
        success: function () {
          form.val("qualificationForm", data);
          admin.req(
            "enterprise/customerCase/admin/customerCase/getCustomerCaseById",
            { id: data.id },
            function (res) {
              console.log(res.data);

              $("#getTitleUrl").html('<img src="' + data.titleUrl + '" style="height: 35px;" />');
              // $('#companyName').val(res.data.enterprise.name)
            },
            "GET",
            false
          );
        }
      });
    }

    //添加按钮点击事件
    // 添加按钮点击事件
    $("#qualificationBtnAdd").click(function () {
      showAddModel();
    });

    function showAddModel(data) {
      admin.open({
        type: 1,
        area: "700px",
        offset: "65px",
        title: "添加资质",
        content: $("#addQualificationForm").html(),
        success: function () {
          form.val("addQualificationForm", data);
          // 表单提交事件
          form.on("submit(qualificationFormSubmit)", function (d) {
            layedit.build("qualificationDescribe");
            d.field.describes = $("#describes").val();
            console.log(d);
            layer.load(2);
            admin.req(
              "enterprise/customerCase/admin/customerCase/add",
              d.field,
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  layer.msg(res.msg, { icon: 1 });
                  table.reload("qualificationTable");
                  layer.closeAll("page");
                } else {
                  layer.msg(res.msg, { icon: 2 });
                }
              },
              "POST"
            );
            return false;
          });
        }
      });
      //渲染下拉框
      form.render("select");
      //时间范围
      laydate.render({
        elem: 'input[name="createTime"]',
        type: "datetime",
        format: "yyyy-MM-dd HH:mm:ss"
      });
      //上传头像
      $("#devicePicBtn").click(uploadImg("devicePicBtn", "devicePic_path", "titleUrl"));
    }

    // 上传文件
    function uploadImg(_elem, pathId, inputId) {
      upload.render({
        elem: "#" + _elem,
        url: config.upload_url + "upload",
        data: {},
        accept: "file",
        exts: "jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx",
        headers: { Authorization: "Bearer " + config.getToken() },
        done: function (res) {
          if (res.code == 200) {
            layer.msg(res.msg || "上传成功", { icon: 1 });
            let imagUrl = res.data.url;
            console.log(imagUrl);
            $("#" + pathId).html('<img src="' + imagUrl + '"/>');
            $("#" + inputId).val(imagUrl);
          } else if (res.code == 502) {
            return location.replace("admin/login.html");
          } else {
            layer.msg(res.msg || "上传失败", { icon: 2 });
          }
        }
      });
    }

    // 删除
    function doDelete(obj) {
      layer.confirm(
        "确定要删除吗？",
        {
          offset: "65px",
          skin: "layui-layer-admin"
        },
        function (i) {
          layer.close(i);
          layer.load(2);
          admin.req(
            "enterprise/customerCase/admin/customerCase/" + obj.data.id,
            {},
            function (res) {
              layer.closeAll("loading");
              if (res.code == 200) {
                layer.msg(res.msg, { icon: 1 });
                obj.del();
              } else {
                layer.msg(res.msg, { icon: 2 });
              }
            },
            "DELETE"
          );
        }
      );
    }

    //批量删除
    $("#batchDel").click(function () {
      var checkRows = table.checkStatus("qualificationTable");
      if (checkRows.data.length == 0) {
        layer.msg("请选择要删除的数据", { icon: 2 });
      } else {
        var ids = "";
        checkRows.data.forEach((item) => {
          ids += item.id + ",";
        });
        delBatch(ids);
      }
    });

    function delBatch(ids) {
      admin.req(
        "enterprise/customerCase/admin/customerCase/delBatch",
        { ids: ids },
        function (res) {
          if (res.code == 200) {
            layer.msg(res.msg, { icon: 1 });
            table.reload("qualificationTable");
          } else {
            layer.msg(res.msg, { icon: 2 });
          }
        },
        "POST"
      );
    }

    // 导出excel
    $("#qualificationBtnExport").click(function () {
      var checkRows = table.checkStatus("qualificationTable");
      if (checkRows.data.length == 0) {
        layer.msg("请选择要导出的数据", { icon: 2 });
      } else {
        table.exportFile(insTb.config.id, checkRows.data, "xls");
      }
    });
  });
</script>
